<template>
  <view class="container m-b5">
    <view class="goods-detail-box">
      <view class="header f-28 col-3">
        <view @tap.stop.prevent="bindHeaderTap" :class="dataType === 'all' ? 'active' : ''" data-type="all">
          <text>全部</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'payment' ? 'active' : ''" data-type="payment">
          <text>待付款</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'checking' ? 'active' : ''" data-type="checking">
          <text>审核中</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'delivery' ? 'active' : ''" data-type="delivery">
          <text>待发货</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'received' ? 'active' : ''" data-type="received">
          <text>待收货</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'comment' ? 'active' : ''" data-type="comment">
          <text>待评价</text>
        </view>
      </view>
      <scroll-view :scroll-y="true" class="data-list">
        <view class="wrapper" v-if="list.length">
          <!-- <view wx:if="{{list.length}}"> -->
          <view class="m-top10" @tap.stop.prevent="navigateToDetail" :data-id="item.order_id"
                v-for="(item, index) in list" :key="index">
            <view class="order-box b-f">
              <view class="order-header dis-flex">
                <view class="flex-box t-l">
                  <text class="title">商品列表</text>
                </view>
                <view class="flex-box t-r">
                  <text class="cont">{{ item.order_status_desc }}</text>
                  <!--                                    <text class="cont" v-if="item.pay_status.value === 10 && item.pay_way === 'transfer'">待审核</text>
                                                      <text class="cont" v-else-if="item.pay_status.value === 10">{{ item.pay_status.text }}</text>
                                                      <text class="cont" v-if="item.pay_status.value === 20 && item.delivery_status.value === 10">{{ item.delivery_status.text }}</text>
                                                      <text class="cont" v-if="item.pay_status.value === 20 && item.delivery_status.value === 20 && item.receipt_status.value === 10">
                                                          {{ item.receipt_status.text }}
                                                      </text>
                                                      <text class="cont" v-if="item.order_status.value === 30">{{ item.order_status.text }}</text>-->
                </view>
              </view>
            </view>

            <view class="order-box b-f">
              <view class="order-cont dis-flex">
                <view class="order-num">
                  <text>订单号：{{ item.order_no }}</text>
                </view>
                <view class="order-time">
                  <text>{{ item.create_time }}</text>
                </view>
              </view>
            </view>

            <view class="order-box order-img_list">
              <view class="order-shop">
                <view class="order-list-box dis-flex">
                  <view class="left">
                    <view class="dis-flex">
                      <view class="order-shop-left" v-for="(item, index1) in item.goods" :key="index1">
                        <image :src="item.image"></image>
                      </view>
                    </view>
                  </view>
                  <view class="right dis-flex flex-x-center flex-y-center">
                    <text class="goods-number">共{{ item.goods.length }}件</text>
                    <text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
                  </view>
                </view>
              </view>
            </view>

            <view class="order-box b-f">
              <view class="order-btn dis-flex">
                <view class="order-left">
                  <view class="text">
                    <text>合计：</text>
                    <text class="col-m">￥{{ item.pay_price }}</text>
                  </view>
                </view>
                <view class="order-right">
                  <view class="btn-group dis-flex">
                    <view class="" v-if="item.pay_status.value === 10">
                      <view @tap.stop.prevent="cancelOrder" class="btn-default" :data-id="item.order_id">取消</view>
                    </view>
                    <view class="" v-if="item.pay_status.value === 10 && item.order_status.value === 10">
                      <view @tap.stop.prevent="navigateToDetail" class="btn-main" :data-id="item.order_id">付款</view>
                    </view>
                    <view class="" v-if="item.delivery_status.value === 20 && item.receipt_status.value === 10">
                      <view @tap.stop.prevent="receipt" class="btn-main" :data-id="item.order_id">确认收货</view>
                    </view>
                    <view class="" v-if="item.order_status.value === 30 && !item.is_comment">
                      <view @tap.stop.prevent="comment" class="btn-default" :data-id="item.order_id">评价</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="yoshop-notcont">
            <text class="iconfont icon-wushuju"></text>
            <text class="cont">亲，您还没有订单信息哦！</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      dataType: 'all',
      list: []
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {
    app.globalData.doLogin();
    this.dataType = options.type || 'all';
    this.setData({
      dataType: this.dataType
    });
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 获取订单列表
    this.getOrderList(this.dataType);
  },
  onPullDownRefresh: function () {
    uni.stopPullDownRefresh();
  },
  methods: {
    /**
     * 获取订单列表
     */
    getOrderList: function (dataType) {
      let that = this;
      app.globalData._get(
          'order/lists',
          {
            dataType
          },
          function (result) {
            console.log(result);
            that.setData(result.data);
            if (result.data.list.length) {
              uni.pageScrollTo({
                scrollTop: 0
              });
            }
          }
      );
    },

    /**
     * 切换标签
     */
    bindHeaderTap: function (e) {
      this.setData({
        dataType: e.currentTarget.dataset.type
      });
      // 获取订单列表
      this.getOrderList(e.currentTarget.dataset.type);
    },

    /**
     * 取消订单
     */
    cancelOrder: function (e) {
      let that = this;
      let order_id = e.currentTarget.dataset.id;
      uni.showModal({
        title: '提示',
        content: '确认取消订单？',
        success: function (o) {
          if (o.confirm) {
            app.globalData._post_form(
                'order/cancel',
                {
                  order_id
                },
                function (res) {
                  uni.showToast({
                    title: res.msg,
                    icon: 'none',
                  });
                  if (res.code == 1) {
                    that.getOrderList(that.dataType);
                  }

                }
            );
          }
        }
      });
    },

    /**
     * 确认收货
     */
    receipt: function (e) {
      let that = this;
      let order_id = e.currentTarget.dataset.id;
      uni.showModal({
        title: '提示',
        content: '确认收到商品？',
        success: function (o) {
          if (o.confirm) {
            app.globalData._post_form(
                'order/receipt',
                {
                  order_id
                },
                function (result) {
                  that.getOrderList(that.dataType);
                }
            );
          }
        }
      });
    },

    /**
     * 发起付款
     */
    payOrder: function (e) {
      let that = this;
      let order_id = e.currentTarget.dataset.id;

      // 显示loading
      uni.showLoading({
        title: '正在处理...'
      });
      app.globalData._post_form(
          'order/pay',
          {
            order_id
          },
          function (result) {
            if (result.code === -10) {
              app.globalData.showError(result.msg);
              return false;
            }
            // 发起微信支付
            uni.requestPayment({
              timeStamp: result.data.timeStamp,
              nonceStr: result.data.nonceStr,
              package: 'prepay_id=' + result.data.prepay_id,
              signType: 'MD5',
              paySign: result.data.paySign,
              success: function (res) {
                // 跳转到已付款订单
                uni.navigateTo({
                  url: '../order/detail?order_id=' + order_id
                });
              },
              fail: function () {
                app.globalData.showError('订单未支付');
              }
            });
          },
          null,
          function () {
            uni.hideLoading();
          }
      );
    },

    /**
     * 订单评价
     */
    comment: function (e) {
      let that = this;
      let order_id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: './comment/comment?order_id=' + order_id
      });
      console.log(order_id);
    },

    /**
     * 跳转订单详情页
     */
    navigateToDetail: function (e) {
      let order_id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '../order/detail?order_id=' + order_id
      });
    }
  }
};
</script>
<style>
@import './index.css';
</style>
